<template>
  <div class="container">
    <div class="table-content">
      <el-row v-loading="loading" element-loading-text="拼命加载中">
        <el-col :span="24" class="toolbar">
          <el-form :inline="true" :model="filters">
            <el-form-item>
              <el-input
                v-model="filters.number"
                placeholder="请输入文件名称"
                auto-complete="off"
                @keyup.enter.native="handleSearch"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" v-on:click="handleSearch"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item class="pull-right">
              <el-button
                type="primary"
                size="medium"
                @click="showAddDialog"
                icon="el-icon-plus"
                >新建文件</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <!--表格数据-->
        <el-col class="table-wrapper">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            @row-click="handleDetail"
          >
            <el-table-column
              prop="dId"
              v-if="idShow"
              label="文件ID"
            ></el-table-column>
            <el-table-column
              prop="dNumber"
              label="文件版本"
              sortable
            ></el-table-column>
            <el-table-column prop="dname" label="文件名称"></el-table-column>
            <el-table-column
              prop="eRemark"
              label="备注"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="createTime"
              :formatter="dateFormatter"
              label="创建日期"
            ></el-table-column>
            <el-table-column
              prop="updateTime"
              :formatter="activeTateFormatter"
              label="更新日期"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit">编辑</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="toolbar">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name:"adddoc",
  data: function () {
    return {
      loading: false,
      idShow: false,
      total: 2,
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          dId: 1,
          dNumber: "20200720002",
          dname: "XX文档",
          eRemark: "无",
          createTime: "2020-07-20",
          updateTime: "2020-07-20",
        },
        {
          dId: 2,
          dNumber: "20200720002",
          dname: "XX文档",
          eRemark: "无",
          createTime: "2020-07-20",
          updateTime: "2020-07-20",
        },
      ],
      addVisible: false, // 添加弹窗flag
      detailVisible: false, // 详情弹窗flag
      maskVisible: false, // 弹窗mask显示
      detailId: 0, // 详情ID
      filters: {
        // 搜索表单
        number: "",
      },
    };
  },
  components: {},
  methods: {
    // 搜索
    handleSearch() {
      console.info(this.filters.number);
    },
    // 详情
    handleDetail(row, event, column) {
      this.detailId = row.mId;
      this.maskVisible = true;
      this.detailVisible = true;
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
          this.tableData.splice(index, 1);
        })
        .catch(() => {});
    },
    // 选择每页显示条数
    handleSizeChange(val) {
      //        this.pageSize = val;
      //        this.currentPage = 1;
    },
    // 跳转页
    handleCurrentChange(val) {
      //        this.currentPage = val;
    },
    // 添加弹窗
    showAddDialog() {
      this.addVisible = true;
    },
    // 关闭所有弹窗
    cancelVisible() {
      this.maskVisible = false;
      this.detailVisible = false;
    },
    // 创建日期转换
    dateFormatter(row, column) {
      return this.getDateValue(row.createTime);
    },
    // 执行日期转换
    activeTateFormatter(row, column) {
      return this.getDateValue(row.updateTime);
    },
    // 获取日期
    getDateValue(datetime) {
      if (datetime) {
        datetime = new Date(datetime);
        let y = datetime.getFullYear() + "-";
        let mon = datetime.getMonth() + 1 + "-";
        let d = datetime.getDate();
        return y + mon + d;
      }
      return "";
    },
  },
};
</script>
<style scoped>
.container {
  width: auto;
}

.table-content{
  margin-top: 10px;
  margin-left: 10px;
}

.detail-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 100%;
  overflow-y: auto;
  z-index: 2000;
  background-color: #fff;
}
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #000;
  opacity: 0.3;
}

.red {
  color: #ff0000;
}
</style>
